<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
	content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>秀色运动网-XSports.wang</title>
<script src="/js/jquery_2.0.3.js"></script>
<script src="/semantic/semantic.js"></script>
<link rel="stylesheet" type="text/css" href="/semantic/semantic.css">
<style>
[data-selector="sizing"] {
	box-sizing: border-box;
	overflow: hidden;
}

[data-selector="sizing"] {
	margin: 0 !important;
	overflow: hidden;
}
</style>
</head>
<body>
	<div class="ui secondary menu grey inverted">
		<a class="item" href="index.html"> <img
			src="http://www.semantic-ui.cn/images/logo.png">
		</a>
		<div class="right menu">
			<div class="item">
				<div class="ui icon input">
					<input type="text" placeholder="查找俱乐部"> <i
						class="search link icon"></i>
				</div>
			</div>
			<a class="item left-menu-btn"><i class="sidebar icon"></i>菜单</a>
		</div>
	</div>

	<div class="ui attached pushable leftmenu">
		<div class="pusher">
			<div class="ui grid center aligned" data-selector="sizing">
				<h2 class="ui header">
					<img
						src="http://www.semantic-ui.cn/images/avatar2/large/patrick.png"
						class="ui circular image">
					<div class="content left">
						注册啦
						<div class="sub header">我要做秀色的人</div>
					</div>
				</h2>
			</div>

			<div class="ui basic segment">
				<div class="ui form">
					<div class="field">
						<label>用户名</label>
						<div class="ui left icon input">
							<input type="text" name="username" placeholder="请输入用户名">
							<i class="user icon"></i>
						</div>
					</div>
					<div class="field">
						<label>密码</label>
						<div class="ui left icon input">
							<input type="password" name="password" placeholder="请输入密码">
							<i class="lock icon"></i>
						</div>
					</div>
					<div class="field">
						<label>重复密码</label>
						<div class="ui left icon input">
							<input type="password" name="repassword" placeholder="请再输入一次密码">
							<i class="lock icon"></i>
						</div>
					</div>
					<div class="ui blue labeled submit icon button">
						注册<i class="add user icon"></i>
					</div>
					<div class="ui error message"></div>
				</div>
				<div class="ui horizontal divider">Or</div>
				<a class="ui teal labeled icon button" href="login.html">
					我已有账号，直接登陆 <i class="add icon"></i>
				</a>
			</div>
			<div class="ui labeled icon right inline vertical sidebar menu">
				<a class="item" href="index.html"><i class="home icon"></i>首页</a> <a
					class="item" href="reg.html"><i class="block layout icon"></i>注册</a>
			</div>
		</div>
	</div>
	<script>
		//标签
		//$('.menu.item').tab();

		$('.ui.sidebar').sidebar({
			context : $('.leftmenu')
		}).sidebar('attach events', '.left-menu-btn');

		$('.ui.form').form({
			fields : {
				username : {
					identifier : 'username',
					rules : [ {
						type : 'empty',
						prompt : '请输入用户名'
					} ]
				},
				password : {
					identifier : 'password',
					rules : [ {
						type : 'empty',
						prompt : '输入的两遍密码不一致'
					}, {
						type : 'minLength[6]',
						prompt : '密码长度最少6位'
					} ]
				},
				repassword : {
					identifier : 'repassword',
					rules : [ {
						type : 'match[password]',
						prompt : '输入的两遍密码不一致'
					}, {
						type : 'minLength[6]',
						prompt : '重复密码长度最少6位'
					} ]
				}
			}
		});
	</script>
</body>
</html>
